import 'package:flutter/material.dart';

class DetailPage extends StatelessWidget {
  const DetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 246, 247, 253),
      body: CustomScrollView(
        slivers: [
          _buildSliverAppBar(),
          SliverToBoxAdapter(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildCategories(),
                _buildBanner(),
                _buildTipText(),
                _buildPrivateKitchensHeader(),
                _buildRestaurantList(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      backgroundColor: Color.fromARGB(255, 246, 247, 253),
      expandedHeight: 108.0,
      pinned: true,
      elevation: 0,
      flexibleSpace: FlexibleSpaceBar(
        background: Stack(
          fit: StackFit.expand,
          children: [
            // 顶部背景图案
            // Image.asset(
            //   'assets/images/header_bg.png', // <-- 替换成你的顶部背景图
            //   fit: BoxFit.cover,
            // ),
            // 确保内容在安全区域内
            SafeArea(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Column(children: [_buildLocationBar()]),
              ),
            ),
          ],
        ),
        // 固定在顶部的搜索框
        titlePadding: const EdgeInsets.only(left: 16, right: 16, bottom: 12),
        title: _buildSearchBar(),
      ),
    );
  }

  Widget _buildLocationBar() {
    return const Row(
      children: [
        Icon(Icons.location_on, color: Colors.black54),
        SizedBox(width: 8),
        Text('Northwalk Rd, Toronto', style: TextStyle(fontSize: 16)),
        Icon(Icons.arrow_drop_down, color: Colors.black54),
      ],
    );
  }

  Widget _buildSearchBar() {
    return Container(
      height: 36,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Row(
        children: [
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 12.0),
            child: Icon(Icons.search, color: Colors.grey),
          ),
          Text(
            '想吃点什么?',
            style: TextStyle(color: Colors.grey[500], fontSize: 12),
          ),
        ],
      ),
    );
  }

  Widget _buildCategories() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Column(
        children: [
          // 第一行: 2个分类
          Row(
            children: [
              Expanded(
                child: _buildCategoryItem(
                  'assets/images/specialty1.png',
                  '地方特色菜',
                  'Local Specialties',
                  imgToRight: true,
                ),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: _buildCategoryItem(
                  'assets/images/specialty2.png',
                  '特色面食',
                  'Wheat Dishes',
                  imgToRight: true,
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          // 第二行: 4个分类
          Row(
            children: [
              Expanded(
                child: _buildCategoryItem(
                  'assets/images/specialty3.png',
                  '卤味熟食',
                  'Braised',
                ),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: _buildCategoryItem(
                  'assets/images/specialty3.png',
                  '便当快餐',
                  'Bento',
                ),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: _buildCategoryItem(
                  'assets/images/specialty5.png',
                  '烘焙甜点',
                  'Bakery',
                ),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: _buildCategoryItem(
                  'assets/images/specialty6.png',
                  '减脂轻食',
                  'Lean Meals',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildCategoryItem(
    String imagePath,
    String title,
    String subtitle, {
    bool imgToRight = false,
  }) {
    return Container(
      padding: const EdgeInsets.all(6),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(
              fontSize: imgToRight ? 16 : 12,
              fontFamily: "Alibaba",
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.left,
          ),
          Text(
            subtitle,
            style: TextStyle(fontSize: 10, color: Colors.grey[500]),
          ),
          const SizedBox(height: 8),
          if (imgToRight) ...[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [SizedBox.shrink(), Image.asset(imagePath, height: 50)],
            ),
          ] else
            Image.asset(imagePath, height: 45),
        ],
      ),
    );
  }

  Widget _buildBanner() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(15),
              child: Image.asset(
                'assets/images/banner.png',
                height: 150,
              ), // <-- 替换成你的Banner图片
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(15),
              child: Image.asset(
                'assets/images/banner.png',
                height: 150,
              ), // <-- 替换成你的Banner图片
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(15),
              child: Image.asset(
                'assets/images/banner.png',
                height: 150,
              ), // <-- 替换成你的Banner图片
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTipText() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 16),
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "The taste of home",
            style: TextStyle(
              color: Color.fromARGB(255, 229, 230, 236),
              fontSize: 24,
              fontWeight: FontWeight.w300,
              height: 1.0,
            ),
          ),
          Text.rich(
            TextSpan(
              // 基础样式
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w300,
                height: 1.0, // <-- 关键：移除垂直间隙
              ),
              children: const [
                TextSpan(
                  text: '一起寻找',
                  style: TextStyle(color: Colors.black), // 设置为黑色
                ),
                TextSpan(
                  text: '家的味道',
                  style: TextStyle(color: Color(0xFFFF8A5B)), // 设置为主题色橙色
                ),
              ],
            ),
          ),
          Text(
            "without the cooking",
            style: TextStyle(
              color: Color.fromARGB(255, 229, 230, 236),
              fontSize: 24,
              fontWeight: FontWeight.w300,
              height: 1.0,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildPrivateKitchensHeader() {
    return Padding(
      padding: const EdgeInsets.only(
        left: 16.0,
        right: 16.0,
        top: 0.0,
        bottom: 16.0,
      ),
      child: Row(
        children: [
          const Text(
            '臻选私厨',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
          const SizedBox(width: 4),
          // Image.asset('assets/images/fire_icon.png', height: 20), // <-- 替换成你的小火苗图标
        ],
      ),
    );
  }

  Widget _buildRestaurantList() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        children: [
          _buildRestaurantCard(
            imagePath: 'assets/images/restaurant1.png', // <-- 替换
            name: 'Nethai烘培厨房',
            tags: '烘培甜点 • Bakery',
            rating: '4.8',
            deliveryTime: '12:00配送',
            distance: '1.2 km',
          ),
          _buildRestaurantCard(
            imagePath: 'assets/images/restaurant1.png', // <-- 替换
            name: '岑式老面包(蜂蜜小面包)',
            tags: '烘培甜点 • Bakery',
            rating: '4.5',
            deliveryTime: '12:00/18:00配送',
            distance: '1.2 km',
          ),
          _buildRestaurantCard(
            imagePath: 'assets/images/restaurant1.png', // <-- 替换
            name: '味研所·陕西面馆',
            tags: '特色面食 • Local Specialties',
            rating: '4.9',
            deliveryTime: '11:00配送',
            distance: '1.2 km',
          ),
          const SizedBox(height: 20), // 底部留白
        ],
      ),
    );
  }

  Widget _buildRestaurantCard({
    required String imagePath,
    required String name,
    required String tags,
    required String rating,
    required String deliveryTime,
    required String distance,
  }) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
      ),
      child: Row(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.asset(
              imagePath,
              width: 100,
              height: 100,
              fit: BoxFit.cover,
            ),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: SizedBox(
              height: 100,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(
                    name,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    tags,
                    style: TextStyle(fontSize: 12, color: Colors.grey[600]),
                  ),
                  Row(
                    children: [
                      const Icon(Icons.star, color: Colors.orange, size: 16),
                      Text(
                        rating,
                        style: const TextStyle(fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(width: 8),
                      const Icon(
                        Icons.timer_outlined,
                        color: Colors.grey,
                        size: 16,
                      ),
                      const SizedBox(width: 4),
                      Text(
                        deliveryTime,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 12, color: Colors.grey[600]),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        distance,
                        style: TextStyle(fontSize: 12, color: Colors.grey[600]),
                      ),
                      Icon(Icons.favorite_border, color: Colors.red[300]),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
